<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
// 引入中国地图的JSON数据
import sxJSON from './shaoxing.json';
import kqJSON from './keqiao.json';
import syJSON from './shangyu.json';
import szJSON from './shengzhou.json';
import xcJSON from './xincang.json';
import ycJSON from './yuecheng.json';
import zjJSON from './zhuji.json';

const emit = defineEmits(['mName']);
const mapName: any = {
  绍兴市: sxJSON,
  越城区: ycJSON,
  柯桥区: kqJSON,
  上虞区: syJSON,
  诸暨市: zjJSON,
  嵊州市: szJSON,
  新昌县: xcJSON,
};
const company: any = {
  越城区: [
    { name: '中国电信股份有限公司绍兴分公司(本部)' },
    { name: '中国电信股份有限公司越城分公司' },
  ],
  柯桥区: [
    { name: '中国电信股份有限公司柯桥分公司' },
  ],
  上虞区: [
    { name: '中国电信股份有限公司上虞分公司' },
  ],
  诸暨市: [
    { name: '中国电信股份有限公司诸暨分公司' },
  ],
  嵊州市: [
    { name: '中国电信股份有限公司嵊州分公司' },
  ],
  新昌县: [
    { name: '中国电信股份有限公司新昌分公司' },
  ],
};
const isSX = ref<boolean>(true);
const map = ref();
// 监听数据给父组件
const mName = ref<string>('绍兴市');
watch(mName, (newValue: string) => {
  emit('mName', newValue);
});

// 注册地图
const currentZoom = ref(1.1);
const currentCenter = ref([120.58, 29.72]);
function initParamsCity(name: string) {
  mName.value = name;
  if (name === '越城区') {
    currentZoom.value = 1.1;
    currentCenter.value = [120.68, 30.03];
  }
  if (name === '柯桥区') {
    currentZoom.value = 1.1;
    currentCenter.value = [120.5, 29.95];
  }
  if (name === '上虞区') {
    currentZoom.value = 1.1;
    currentCenter.value = [120.874185, 29.97];
  }
  if (name === '诸暨市') {
    currentZoom.value = 1.1;
    currentCenter.value = [120.24, 29.65];
  }
  if (name === '嵊州市') {
    currentZoom.value = 1.1;
    currentCenter.value = [120.83, 29.56];
  }
  if (name === '新昌县') {
    currentZoom.value = 1.1;
    currentCenter.value = [121, 29.38];
  }
  if (name === '绍兴市') {
    currentZoom.value = 1.1;
    currentCenter.value = [120.58, 29.72];
  }
  echarts.registerMap('mapJson', { geoJSON: mapName[name] } as any);
  const mychart = echarts.init(map.value);
  // 设置配置项
  mychart.setOption({

    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(5,26,78,0)', // 背景色
      extraCssText: 'box-shadow:none;', // 覆盖原始style样式
      borderWidth: 0, // 边框宽度

      textStyle: {
        color: '#fff', // 文字颜色
      },
      // 自定义提示内容
      formatter(params: any) {
        let res = '';
        for (let i = 0; i < company[params.value].length; i++) {
          res += `${company[params.value][i].name}<br/>`;
        }
        return res;
      },
      // 设置弹框位置
      // position: function (pos: number[], params: any, dom: any, rect: any, size: { contentSize: number[]; }) {
      //   return [pos[0] - size.contentSize[0] / 2, pos[1] - size.contentSize[1] - 10];
      // },
    },

    // tooltip: {
    //   trigger: 'axis',
    //   enterable: true,
    //   confine: true,
    //   formatter: function (params: any) {
    //     console.log(params);

    //     var res = ''
    //     for (let i = 0; i < company[params.name].length; i++) {
    //       res += company[params.name][i].name + '<br/>'
    //     }
    //     console.log(res);
    //     return res;
    //   }
    // },
    // 地图组件
    geo: {
      map: 'mapJson', // 中国地图
      roam: true, // 鼠标缩放的效果
      zoom: currentZoom.value,
      center: currentCenter.value,

      // 地图上的文字的设置
      label: {
        show: true, // 文字显示出来
        color: 'white',
        fontSize: 14,
      },
      itemStyle: {
        // 每一个多边形的样式
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#22bfe3', // 0% 处的颜色
          }, {
            offset: 1, color: '#0f4cac', // 100% 处的颜色
          }],
          global: false, // 缺省为 false
        },
        opacity: 0.8,
      },
      // 地图高亮的效果
      emphasis: {
        itemStyle: {
          color: '#84dac2',
        },
        label: {
          fontSize: 30,
        },
      },
    },
    // 布局位置
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
  });
  mychart.on('click', (params) => {
    if (params.name !== '绍兴市') {
      isSX.value = false;
      initParamsCity(params.name);
    }
  });
}
function back() {
  initParamsCity('绍兴市');
  isSX.value = true;
}
onMounted(() => {
  initParamsCity('绍兴市');
  isSX.value = true;
});
</script>

<template>
  <div class="map-main">
    <a-button v-if="!isSX" class="map-btn" type="link" @click="back">
      回到绍兴
    </a-button>
    <div ref="map" class="box4">
      我是地图组件
    </div>
  </div>
</template>

<style lang="scss" scoped>
.map-main {
  display: flex;
  flex-direction: column;

  .map-btn {
    width: 150px;
    height: 40px;
    margin-left: 20px;
    font-size: 20px;
    color: #29fcff;
    text-align: center;
    border: 2px solid #29fcff;
  }

  .map-btn:hover {
    box-shadow: 0px 0px 15px 0px #29fcff, 0px 0px 15px 0px #22d6da;
  }

  .box4 {
    flex: 1;
  }
}
</style>
